<template>
	<view>
		<view style="height:190rpx;">
			<view class="hader-tabs">
				<tabs :tabs="tabs" :backgroundColor="'#000000'" :selectedColor="'#FFFFFF'" :sliderBgColor="'#FFFFFF'" :color="'#FFFFFF'" @change="handleClick" sliderHeight="0" :bold="true" :fize="35"></tabs>
			</view>
		</view>
		
		<!-- 首页 -->
		<view v-if="index == 0">
			<view class="hader-banner">
				<view class="swiper-body">
					<view class="background">
						<swipers :position="position" :Height="400" @Change="variation" :indicatorDots="false"></swipers>
					</view>
				</view>
			</view>
			<view class="bw-screen">
				<text class="left">车辆筛选</text>
				<text class="right">条件筛选
				<!-- <text class="iconfont icon-shaixuan shaixuan"></text> -->
				</text>
			</view>
			
			<view class="bw-select">
				<view v-for="(a_item,a_index) in screen" :key="a_index" class="bw-choice">
					<!-- <text :class="`iconfont ${a_item.img} max`"></text> -->
					<text>{{a_item.name}}</text>
				</view>
			</view>
			
			<!-- 这是一条华丽的分割线 -->
			<view class="cut-off-rule"></view>
			
			<view class="bw-title">
				<text class="left">港口现车</text>
				<text class="right">查看更多
				<!-- <text class="iconfont icon-qianjinxiayige shaixuan"></text> -->
				</text>
			</view>
			<view class="bw-list-body">
				<view v-for="(a_item,a_index) in lists" :key="a_index" class="lists-body">
					<lists :leftColor="'#dd5247'" :rightColor="'#b5b5b5'" :rightfontSize="25" :leftfontSize="35" :Data="a_item"></lists>
					<view class="cut-off-rule"></view>
				</view>
			</view>
			
			<view class="bw-title">
				<text class="left">海运在途</text>
				<text class="right">查看更多
				<!-- <text class="iconfont icon-qianjinxiayige shaixuan"></text> -->
				</text>
			</view>
			<view class="bw-list-body">
				<view v-for="(a_item,a_index) in lists" :key="a_index" class="lists-body">
					<lists :leftColor="'#dd5247'" :rightColor="'#b5b5b5'" :rightfontSize="25" :leftfontSize="35" :Data="a_item"></lists>
					<view class="cut-off-rule"></view>
				</view>
			</view>
		</view>
		
		<!-- 交车秀 -->
		<view v-if="index == 1" class="bw-header-body">
			
		</view>
		
		<loading></loading>
	</view>
</template>

<script>
	import swipers from 'components/bw-swipers/bw-swipers.vue';
	import lists from 'components/bw-lists/bw-lists.vue';
	import loading from 'components/bw-loading/bw-loading.vue';
	import tabs from 'components/bw-Tabs/bw-Tabs.vue';
	export default {
		components:{
			swipers,
			lists,
			loading,
			tabs
		},
		data(){
			return{
				lists:[
					{
						name:'路虎揽胜极光行政版 大型SUV 260',
						cover_plan:'https://img0.baidu.com/it/u=3861519815,4253731799&fm=26&fmt=auto&gp=0.jpg',
						price:'122',
						type:'5座/曜岩黑'
					},{
						name:'奥迪Q3 紧凑型SUV 4座',
						cover_plan:'https://img0.baidu.com/it/u=313436008,1504428452&fm=26&fmt=auto&gp=0.jpg',
						price:'24',
						type:'4座/曜岩黑'
					},{
						name:'奥迪A4 中型轿车 4座',
						cover_plan:'https://img1.baidu.com/it/u=462243577,2842034163&fm=26&fmt=auto&gp=0.jpg',
						price:'30',
						type:'4座/曜岩黑'
					},{
						name:'宝马320i 中型轿车 4座',
						cover_plan:'https://img0.baidu.com/it/u=829677719,4116759873&fm=253&fmt=auto&app=120&f=JPEG?w=650&h=437',
						price:'30',
						type:'4座/曜岩黑'
					},{
						name:'奔驰C200 中型轿车 4座',
						cover_plan:'https://img1.baidu.com/it/u=3781322334,70955359&fm=26&fmt=auto&gp=0.jpg',
						price:'30',
						type:'4座/曜岩黑'
					},{
						name:'凯迪拉克CT5 中型轿车 4座',
						cover_plan:'https://img1.baidu.com/it/u=2386597355,112102061&fm=26&fmt=auto&gp=0.jpg',
						price:'29',
						type:'4座/曜岩黑'
					}
				],
				position:0, //位置 0=首页,1=商城,2=分类
				tabs:[
					{
						name:'首页',
					},{
						name:'交车秀'
					}
				],
				index:0,
				screen:[
					{
						name:'奥迪',
						img:'icon-aodi'
					},{
						name:'凯迪拉克',
						img:'icon-kaidilake'
					},{
						name:'凌志',
						img:'icon-leikesasi'
					},{
						name:'捷豹',
						img:'icon-jiebao'
					},{
						name:'更多',
						img:'icon-gengduo'
					}
				]
			}
		},
		methods:{
			//点击轮播图回调
			variation(e){
				console.log(e);
			},
			handleClick(e){
				switch(e.index){
					case 0:
					  this.index = e.index;
					break;
					case 1:
					  this.index = e.index;
					break;
				}
			}
		}
	}
</script>

<style scoped lang="scss"> 
	@import "../../../iconfont.scss";

	.hader-banner{
		width:100%;
		margin:0px auto;
		height: auto;
		.swiper-body{
			width:100%;
			background-image: linear-gradient(180deg, #313131 0%, rgba(49,49,49,0.90) 36%, #FFFFFF 100%);
			.background{
				width:95%;
				margin:0px auto;
			}
		}
	}
	
	.bw-list-body{
		width:95%;
		padding-top:50rpx;
		margin:0px auto;
		display: flex;
		flex-wrap: wrap;
		justify-content:space-around;
		.lists-body{
			width:48%;
			
		}
	}
	
	.cut-off-rule {
		width: 100%;
		height: 20rpx;
		background-color: #ebecee;
		margin:20rpx auto;
	}
	
	.bw-screen{
		width:90%;
		margin:0px auto;
		display: flex;
		justify-content: space-between;
		padding-top:30rpx;
		padding-bottom:10rpx;
		.left{
			font-weight:500;
			font-size:35rpx;
		}
		.right{
			font-size:28rpx;
			color:#626262;
		}
		.shaixuan{
			padding-left:10rpx;
		}
	}
	
	.bw-select{
		width:90%;
		padding-bottom:20rpx;
		padding-top:20rpx;
		margin:0px auto;
		display: flex;
		justify-content: space-between;
		.bw-choice{
			.max{
				font-size:65rpx;
			}
			text{
				font-size:28rpx;
				display: block;
				text-align: center;
			}
		}
	}
	
	.bw-title{
		width:90%;
		margin:0px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top:30rpx;
		.left{
			font-size:35rpx;
		}
		.right{
			font-size:26rpx;
			color:#7f7f7f;
		}
	}
	
	.hader-tabs{
		width:100%;
		padding-top:30rpx;
		padding-bottom:80rpx;
		background-color:#000000;
		position: fixed;
		left:0rpx;
		z-index:9999;
	}
</style>
